<script setup lang="ts">
import { ref } from 'vue'
import { targets } from '../utils/config'
targets.sort((a, b) => Number(!!a.done) - Number(!!b.done))
const activeNames = ref([1])
</script>

<template>
  <div class='m-score'>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="得分小目标" name="1">

        <ul class='list'>
          <li v-for="item in targets" :key="item.text">
            <el-card style="max-width: 480px; padding: 0">
              <!-- <template> -->
              <div class="card-body">
                <div class='l'>
                  <div><span class="score">{{ item.score }}</span> 分</div>
                  <div class="text">{{ item.text }}</div>
                </div>
                <div class='r'>
                  <el-result v-if='item.done' icon="success" title="完成时间" :sub-title="item.time" />
                  <el-result v-else icon="info" title="等你完成" sub-title="ヾ(◍°∇°◍)ﾉﾞ" />
                  <div v-if='item.id' class='id'>编号: {{ item.id }}</div>
                  <!-- <div type="primary" v-if='!item.done'></div> -->
                </div>
              </div>
              <!-- </template> -->
              <!-- <template #footer>{{ item.done ? '已完成' : '未完成' }}</template> -->
            </el-card>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style scoped>
@font-face {
  font-family: '小魂书信体';
  src: url('../assets/font/字小魂书信体(商用需授权).ttf')
}

.m-score {
  ::v-deep(.el-card__body) {
    padding: 12px;
  }

  .el-result {
    padding: 0;
    padding-left: 12px;
  }

  ul.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    list-style: none;
    padding: 16px;
    box-sizing: border-box;

    li {
      width: calc((100% - 24px) / 3);

      .card-body {
        display: flex;
        text-align: center;

        .r {
          flex: 1;

          ::v-deep(.el-result__title) {
            margin-top: 12px;
          }

          ::v-deep(.el-result__subtitle) {
            margin-top: 4px;
          }

          .id {
            margin-top: 2px;
          }
        }

        .l {
          flex: 1.618;
          padding-right: 12px;
          border-right: 1px solid #bbb;

          .score {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-200);
            line-height: 48px;
          }

          .text {
            border-radius: 4px;
            font-family: 小魂书信体, 'Microsoft YaHei', sans-serif;
            box-shadow: inset 1px 2px 2px 3px #252525;
            color: #fff;
            background-color: #474646d4;
            box-shadow: inset 3px 3px 16px #0000008c;
            padding: 4px;
            height: 98px;
            text-align: left;
            text-indent: 2em;
            font-size: 18px;
            line-height: normal;
            outline: 3px solid #ffffff99;
          }
        }
      }
    }

  }
}
</style>
